<style>
div.imgTab {
  cursor:hand;
}
</style>

<script type="text/javascript">
</script>
<div style="width:24px">
&nbsp;
</div>
<div style="width:35px;float:left;padding-left:24px" id="mainContentWrapper">
<br/>
    <div class="imgTab" id="mission" style="text-align:right;height:125px">
        <img src="/public/themes/gome/images/gome/<?=$this->viewParams['language']?>/button_sumenh.gif"/>
    </div>
    <div class="imgTab" id="vision" style="text-align:right;height:128px">
        <img src= "/public/themes/gome/images/gome/<?=$this->viewParams['language']?>/button_tamnhin.gif">
    </div>
     
    <!--div class="imgTab" id="philosophy" style="text-align:right;height:135px">
        <img src="/public/themes/gome/images/gome/<?=$this->viewParams['language']?>/button_trietlikinhdoanh.gif"/>
    </div-->
</div>
<style>
div#mainContent
{
    width:535px;float:left;margin-right:18px;
    display:inline;
}
div#realContent
{
    background-color:#ECECEC;
    height:390px;
}
</style>
<div id="mainContent" >
   <div>
   <img src="/public/themes/gome/GOME/IMAGE/top_khung.png" width="100%"/>
   </div>
   <div id="realContent" style="padding: 15px 10px 10px 20px;">
    <?=$this->viewParams['mission']['body'];?>
   </div>
   <div>
   <img src="/public/themes/gome/GOME/IMAGE/khung_duoi.png" width="100%"/>
   </div>
   
</div>

<div style="display:none">
    <span id="visionSpan">
    <?=$this->viewParams['vision']['body'] ?>
    </span>
    <span id="missionSpan">
    <?=$this->viewParams['mission']['body'] ?>
    </span>
     <!-- 
    <span id="philosophySpan">
    <?//=$this->philosophy['body'] ?>
    </span>
     -->
</div>

<script type="text/javascript">

var t;
$(function() {

    $("div.imgTab").click(function(){
        id = $(this).attr('id');
        spanId = "#" + id + "Span";
        $("#realContent").html($(spanId).html());
        clearTimeout(t);
        });
    $("#mainContent").hover(function(){
        clearTimeout(t);
        $(this).css('cursor:hand');
    }, function(){
        t = setTimeout("callMe();", 3000);
    });
                   
    $("div.imgTab").hover(function(){  //mouse over
    	$('body').css('cursor', 'pointer'); 
    }, function(){
    	$('body').css('cursor', 'default');
    }); 
});

    //changeTab();
    var curTab = 'vision';
    function changeTab()
    {
        if (curTab == 'vision')
            curTab = 'mission';
        else if (curTab == 'mission')
            curTab = 'vision';
   /*     
        else if (curTab == 'philosophy')
            curTab = 'philosophy';
     */ 
        $('#mainContentWrapper #' + curTab).trigger('click');
    }
    
    function callMe()
    {
        changeTab();
        t = setTimeout("callMe();", 3000);    
    }

    t = setTimeout("callMe();", 3000);


</script>
